<template>
  <div>
    <bread :linktitle="list"></bread>
    <div class="params-wrap">
      <el-alert
        title="注意:只允许为第三级分类设置相关参数!"
        type="warning"
        show-icon
      >
      </el-alert>
      <el-row
        type="flex"
        align="middle"
        style="padding:20px 0; text-align:left"
      >
        <el-col style="width:115px;">选择商品分类:</el-col>
        <el-col style="width:300px;"
          ><el-cascader
            v-model="value"
            :options="options"
            :props="defaultParams"
            @change="handleChange"
            clearable
          ></el-cascader
        ></el-col>
      </el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button
            type="primary"
            style="margin-bottom:10px"
            :disabled="current"
            >添加参数</el-button
          >
          <div></div>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button
            type="primary"
            style="margin-bottom:10px"
            :disabled="current"
            >添加属性</el-button
          >
        </el-tab-pane>
      </el-tabs>
      <el-table :data="paramsList" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="attr_id:">
                <span>{{ props.row.attr_id }}</span>
              </el-form-item>
              <el-form-item label="attr_sel:">
                <span>{{ props.row.attr_sel }}</span>
              </el-form-item>
              <el-form-item label="attr_vals:">
                <span>{{ props.row.attr_vals }}</span>
              </el-form-item>
              <el-form-item label="attr_write:">
                <span>{{ props.row.attr_write }}</span>
              </el-form-item>
              <el-form-item label="delete_time:">
                <span>{{ props.row.delete_time }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="属性名称" prop="attr_name"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary">修改</el-button>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import bread from "../../common/breadcrumb.vue";
export default {
  data() {
    return {
      value: [],
      defaultParams: {
        label: "cat_name",
        value: "cat_id",
        children: "children"
      },
      activeName: "many",
      list: ["首页", "商品管理", "参数列表"],
      options: [],
      paramsList: []
    };
  },
  methods: {
    handleChange() {
      if (this.value.length !== 3) {
        this.value = [];
        this.paramsList = []
        return;
      }
      this.getparams();
    },

    handleClick() {},

    async getcate() {
      let { data, meta } = await this.$http.get("categories");
      if (meta.status !== 200) return this.$message.error(meta.msg);
      this.options = data;
      this.$message.success(meta.msg);
    },
    async getparams() {
      let { data, meta } = await this.$http.get(
        `categories/${this.cateId}/attributes`,
        {
          params: { sel: this.activeName }
        }
      );
      if (meta.status !== 200) return this.$message.error(meta.msg);
      this.paramsList = data;
    }
  },
  created() {
    this.getcate();
  },
  components: {
    bread
  },
  computed: {
    current() {
      return this.value.length !== 3 ? true : false;
    },
    cateId() {
      if (this.value.length == 3) return this.value[2];
      return null;
    }
  },
  watch: {
    activeName() {
      this.getparams();
    }
  }
};
</script>
<style scoped>
.params-wrap {

  background-color: #fff;
  margin-top: 15px;
  padding: 15px;
  box-sizing: border-box;
  text-align: start;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
